<template>
    <div>
        <h1>{{title}}</h1>
        <button @click="getCitys">获取城市</button>
        <div>
            <span v-for="(item,index) in citys" :key="index">
                {{item.label}}
            </span>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                title:"城市列表",
                citys:["西安"]
            }
        },
        methods:{
            getCitys(){
                axios.get("http://120.48.109.174:8081/area/city?level=1").then(res=>{
                    console.log(res);
                    let citys = res.data.body;
                    this.citys = citys;
                })
            }
        }
    }
</script>

<style scoped>
    div{
        text-align: center;
    }
    span{
        font-size: 50px;
        color: yellowgreen;
        font-weight: bolder;

    }
</style>